import React, { useEffect, useState } from 'react';
import { useNavigate } from "react-router-dom"
import axios from "axios"
import { Image, Button,message } from 'antd';
import "./style.scss"

const Index = () => {
    const navigate = useNavigate()
    const [list, setlist] = useState([])
    const http = async () => {
        const res = await axios.get('/imgList')
        console.log(res.data)
        setlist(res.data.data.objects)
    }
    useEffect(() => {

        http()
    }, [])
    const download = async (name) => {
        const res = await axios.post('/download', { name })
        console.log(res.data)
        window.open(res.data.data)
    }
    const delImg = async (name) => {
        const res = await axios.delete('/delImage/' + name)
        console.log(res)
        if(res.data.code===200){
            message.success(res.data.mes)
        }else{
            message.error(res.data.mes)
        }
        http()
    }
    return (
        <div className='wrap'>
            <div className="head">
                <h3>图片列表</h3>
                <Button onClick={() => navigate('/home/my')}>我的</Button>
            </div>
            <div className="listWrap">
                {
                    list?.map((v, i) => (
                        <div key={i}>
                            <Image width={200} src={v.url} />
                            <Button onClick={() => download(v.name)}>下载</Button>
                            <Button onClick={() => delImg(v.name)}>删除</Button>
                        </div>
                    ))
                }
            </div>
        </div>
    );
}

export default Index;
